<script>

export default {
  props: ['tableList', 'fetchTableData'],
  watch: {
    tableList(n) {
      if (n) {
        this.parentTable = n
      }
    }
  },
  data() {
    return {
      localPickPoints: {
        setAreaLabel: null,
        setCenter: null,
        show: false,
        area: [
          {lng: null, lat: null}
        ],
        center: {lng: null, lat: null}
      },
      param: {
        content: {
          keyword: null
        }
      },
      parentTable: {
        item: null,
        hidden: false
      },
      detailOrAdd: {
        template: {
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18}
        },
        data: {
          id: null,
          nameInfo: {shortName: {'zh-CN': ''},fullName: {'zh-CN': ''}},
          satelliteLocation: {lng: '',lat: '',area: '', zoom: 18}
        }
      },
      instituteList: {
        data: []
      }
    }
  },
  mounted() {
    this.fetchBaseData()
    this.parentTable = this.tableList
    if (this.parentTable.item) {
      this.detailOrAdd.data = this.parentTable.item
    }else {
      this.detailOrAdd.data = this.detailOrAdd.template
    }
  },
  methods: {
    formCancel: function () {
      this.parentTable.hidden = false
      this.fetchTableData()
    },
    fetchBaseData: function () {
      this.$axios({url:'/ems/client/base/institute/list',data: this.param}).then((content) => {
        const list = content.list;
        const arr = []
        const currentOjbId = this.detailOrAdd.data.id
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
          if (currentOjbId !== item.id) {
            arr.push(item)
          }
        })
        arr.unshift({id: null, nameInfo:{shortName:{'zh-CN': '无'}}})
        this.instituteList.data = arr
      });
    },
    formSubmit: function () {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.saveOrUpdate(this.detailOrAdd.data)
        }else {
          return false
        }
      })
    },
    saveOrUpdate: function (data) {
      const param = {}
      for (let k in data) {
        const v = data[k]
        if (v instanceof Object) {
          param[k] = JSON.stringify(v)
        }else {
          param[k] = v
        }
      }
      this.$axios({url:'/ems/client/base/institute/update',data: {content: param}}).then((content) => {
        if (content) {
          this.$message("保存成功")
          this.formCancel()
        }
      });
    },
    setPoint: function () {
      const detailOrAdd = this.detailOrAdd
      this.localPickPoints.setCenter = function (point) {
        detailOrAdd.data.satelliteLocation.lng = point.lng
        detailOrAdd.data.satelliteLocation.lat = point.lat
      }
      this.localPickPoints.setAreaLabel = function (pointArr) {
        let area = ''
        pointArr.forEach(function (point){
          if (area !== '') {
            area = area + ';'
          }
          area = area + point.lng + ',' + point.lat
        })
        detailOrAdd.data.satelliteLocation.area = area
      }
      this.localPickPoints.show = true
    }
  },
  components: {
      MapPoint: () => import("@/components/system-base/modules/map-point.vue")
  }
}
</script>

<template>
  <el-form ref="form" :model="detailOrAdd.data" label-width="150px">
    <MapPoint v-if="localPickPoints.show" :pickPoints="localPickPoints"/>
    <el-row v-if="!localPickPoints.show"  style="margin-top: 20px;">
      <el-col :span="8">
        <el-form-item label="ID">
          <el-input v-model="detailOrAdd.data.id" style="width: 250px;" disabled></el-input>
        </el-form-item>
        <el-form-item prop="parentId" label="上级院所">
          <el-select v-model="detailOrAdd.data.parentId" placeholder="请选择上级院所">
            <el-option v-for="item in instituteList.data" :key="item.id" :label="item.nameInfo.shortName['zh-CN']" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="院所全称" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.nameInfo.fullName['zh-CN']" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="院所简称" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.nameInfo.shortName['zh-CN']" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="院所编码" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.code" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="profile" label="院所简介" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.profile" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="logo" label="院所图标" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.logo" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="院所经度" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.lng" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="院所纬度" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.lat" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="经纬度范围" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.area" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="地图可见级别" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.satelliteLocation.zoom" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="打开地图获取信息" label-width="150px">
          <el-button type="primary" plain @click="setPoint">打开地图获取信息</el-button>
        </el-form-item>
        <el-form-item label="院所地址" label-width="150px">
          <el-input v-model="detailOrAdd.data.address" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="mobilePhone" label="移动号" label-width="150px">
          <el-input v-model="detailOrAdd.data.mobilePhone" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="telephone" label="座机号" label-width="150px">
          <el-input v-model="detailOrAdd.data.telephone" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="院所面积/平米" label-width="150px">
          <el-input v-model="detailOrAdd.data.totalSize" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="buildingSize" label="建筑面积/平米" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.buildingSize" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="扩展信息（报表可用）" label-width="150px">
          <el-input v-model="detailOrAdd.data.ext" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="formSubmit">提交</el-button>
      <el-button @click="formCancel">取消</el-button>
    </el-row>
  </el-form>
</template>

<style>

</style>
